<template>
  <div>
    <!-- 头部搜索 -->
    <div class="header">
      <span class="iconfont iconjiantou2" @click="goBack"></span>
      <div class="searchWrapper">
        <span class="iconfont iconsearch"></span>
        <input
          type="text"
          @keyup.enter="onSearch"
          v-model="keyword"
          ref="searchInput"
        />
      </div>
      <div class="btnSearch" @click="onSearch">搜索</div>
    </div>

    <!-- 搜索历史 -->
    <div
      v-if="historyList.length > 0 && postList.length == 0"
      class="history-search"
    >
      <h2>搜索历史</h2>
      <div class="history-list">
        <div
          class="item"
          v-for="(history, index) of historyList"
          :key="index"
          @click="handleClickItem(history)"
        >
          {{ history }}
        </div>
      </div>
    </div>

    <div class="hot-search" v-if="postList.length === 0">
      <h2>热门搜索</h2>
      <div class="hot-list">
        <div
          class="item"
          v-for="hot of hotList"
          :key="hot.id"
          @click="handleClickItem(hot.keyword)"
        >
          {{ hot.keyword }}
        </div>
      </div>
    </div>

    <post-item v-for="post of postList" :postData="post" :key="post.id" />
  </div>
</template>

<script>
import PostItem from "../components/PostItem";
export default {
  name: "Search",
  components: {
    PostItem,
  },
  data() {
    return {
      keyword: "",
      postList: [],
      historyList: [],
      hotList: [
        {
          id: 1,
          keyword: "美女",
        },
        {
          id: 2,
          keyword: "阿信",
        },
        {
          id: 3,
          keyword: "王祖贤",
        },
        {
          id: 4,
          keyword: "华为",
        },
        {
          id: 5,
          keyword: "关晓彤",
        },
      ],
    };
  },
  watch: {
    historyList() {
      window.localStorage.setItem(
        "historyList",
        JSON.stringify(this.historyList)
      );
    },
  },
  mounted() {
    this.$refs.searchInput.focus();
    this.getHistory();
  },
  methods: {
    onSearch(history) {
      if (this.keyword.trim() === "") {
        this.$toast.fail("请输入关键词");
        return;
      }
      this.$axios
        .get("/post_search", {
          params: {
            keyword: this.keyword,
          },
        })
        .then((res) => {
          if (res.data.data.length === 0) {
            this.$toast.fail("没有找到相关数据");
          }
          this.postList = res.data.data;
          let index = this.historyList.indexOf(this.keyword);
          if (index > -1) {
            this.historyList.splice(index, 1);
          }
          this.historyList.unshift(this.keyword);
        });
    },
    getHistory() {
      this.historyList =
        JSON.parse(window.localStorage.getItem("historyList")) || [];
    },
    goBack() {
      if (this.postList.length > 0) {
        this.postList = [];
      } else {
        this.$router.back();
      }
    },
    handleClickItem(newKeyword) {
      this.keyword = newKeyword;
      this.onSearch();
    },
  },
};
</script>

<style lang="less" scoped>
.header {
  display: flex;
  padding: 10/360 * 100vw 20/360 * 100vw;
  align-items: center;
  .searchWrapper {
    flex: 1;
    border: 1px solid #888;
    border-radius: 18/360 * 100vw;
    padding: 0 18/360 * 100vw;
    margin: 0 12/360 * 100vw;
    input {
      margin-left: 10/360 * 100vw;
      line-height: 38/360 * 100vw;
      width: 88%;
      border: none;
      outline: none;
    }
  }
}
.history-search,
.hot-search {
  padding: 10/360 * 100vw 20/360 * 100vw;
  h2 {
    font-size: 16/360 * 100vw;
    padding-bottom: 20/360 * 100vw;
  }
  .history-list,
  .hot-list {
    display: flex;
    flex-wrap: wrap;
    border-bottom: 1px solid #e4e4e4;
    padding-bottom: 10/360 * 100vw;
    .item {
      color: #333;
      font-size: 14/360 * 100vw;
      padding: 10/360 * 100vw;
    }
  }
}
</style>
